<template>
  <Modal title="流程数据信息" v-model="dialogVisible" width="70">
    <Alert type="warning" show-icon closable>
      使用说明
      <template slot="desc">以下流程信息可以被存储起来，方便下一次流程加载</template>
      <span slot="close">知道了</span>
    </Alert>
    <br />
    <!--一个高亮显示的插件-->
    <codemirror :value="flowJsonData" :options="options" class="code"></codemirror>
  </Modal>
</template>

<script>
import 'codemirror/lib/codemirror.css'
import { codemirror } from 'vue-codemirror'

require('codemirror/mode/javascript/javascript.js')

export default {
  props: {
    data: Object
  },
  data() {
    return {
      dialogVisible: false,
      flowJsonData: {},
      options: {
        mode: { name: 'javascript', json: true },
        lineNumbers: true
      }
    }
  },
  components: {
    codemirror
  },
  methods: {
    init() {
      this.dialogVisible = true
      this.flowJsonData = JSON.stringify(this.data, null, 4).toString()
    }
  }
}
</script>
